<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听-异步</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用"></div>
</body>
<script>
    const {createApp: 创建, ref: 响应, watch: 侦听} = Vue 

    const 根组件 = {
        template: `
            <p>{{状态}}</p>
            <button @click="异步操作">异步操作</button>
        `,
        setup() {
            const 状态 = 响应('空闲')

            // const 执行异步操作 = () => {
            //     return new Promise(
            //         (成功回调, 失败回调) => {
            //             setTimeout(
            //                 () => {
            //                     const 随机数 = Math.random()
            //                     if(随机数 < 0.8) {
            //                         成功回调('异步操作完成')
            //                     } else {
            //                         失败回调(new Error('异步操作失败'))
            //                     }
            //                 },
            //                 500
            //             )
            //         }
            //     )
            // }
            const 等待 = async (毫秒) => await new Promise(回调 => setTimeout(回调, 毫秒))
            const 执行异步操作 = async () => {
                await 等待(500)
                const 随机数 = Math.random()
                if (随机数 < 0.8) {
                    return '异步操作完成'
                } else {
                    return new Error('异步操作失败')
                }
            }


            const 异步操作 = async () => {
                状态.value = '运行中'

                try {
                    await 执行异步操作()
                    状态.value = '成功'
                } catch {
                    状态.value = '失败'
                    console.error(错误)
                }
            }

            侦听(
                状态,
                (新状态) => {
                    console.log('状态变化: ', 新状态)
                }
            )

            return {状态, 异步操作}
        }
    }

    const 应用 = 创建(根组件)
    应用.mount('#应用')
</script>
</html>